import React from 'react';
import { useHistory } from "react-router-dom";
import useTitle from '../../hooks/useTitle';

import './index.css';

function Cosplay() {
  useTitle(Cosplay.title);
  const history = useHistory();
  function goExperience(num){
    history.push('/experience?id='+num)
  }
  return (
    <div className='cosplay'>
      <div className='role'>
        <div className='role-image-1'></div>
        <div className='role-name'>医助</div>
        <div className='gotoplay' onClick={ () => goExperience(0) }>去扮演</div>
      </div>
      <div className='role'>
      <div className='role-image-2'></div>
        <div className='role-name'>前台</div>
        <div className='gotoplay' onClick={ () => goExperience(1) }>去扮演</div>
      </div>
      <div className='role'>
      <div className='role-image-3'></div>
        <div className='role-name'>医生</div>
        <div className='gotoplay' onClick={ () => goExperience(2) }>去扮演</div>
      </div>
    </div>
  );
}

Cosplay.path = '/cosplay';
Cosplay.title = '角色扮演';
Cosplay.meta = {
    keywords:
      '角色扮演',
    description:
      '宠物医院 角色扮演 学习知识'
  };
Cosplay.exact = true;

export default Cosplay;
